import React, { useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import topicsStore, { GetTopicsParams, TopicsTab } from '@/store/topics';
import appStore from '@/store/app';
import './index.less';

const TopicsPage = observer(() => {
    const navigate = useNavigate();
    const { pathname } = useLocation();

    useEffect(() => {
        const tab: TopicsTab = (pathname.split('/')[2] || '') as TopicsTab;
        appStore.setLoading(true);
        const params: GetTopicsParams = {
            tab,
        };
        topicsStore.getTopics(params).then(() => {
            appStore.setLoading(false);
        });
    }, [pathname]);

    return (
        <main className='container home-container'>
            <div className=' bg-slate-50 flex-1 overflow-auto'>
                {topicsStore.topics.map((topic) => {
                    return (
                        <div
                            className='post-card relative mb-4'
                            key={topic.id}
                            onClick={() => {
                                navigate(`/topic/${topic.id}`);
                            }}
                        >
                            <div>{topic.create_at}</div>
                            <div className='post-item flex'>
                                <img src='/thumbnails.jpg' alt='img' className='' />
                                <div className='post-info flex flex-col flex-1  '>
                                    <div>{topic.title}</div>
                                    <div>
                                        阅读 {topic.visit_count} 回复 {topic.reply_count}
                                    </div>
                                </div>
                            </div>
                        </div>
                    );
                })}
            </div>
        </main>
    );
});
export default TopicsPage;
